<template>
  <div class="loading">
    <Loading :loading="loading" :transparent="true" :type="type" />
    <Loading :loading="loading" :mask="true" :type="type" />
    <a-space>
      <a-button @click="checkType('success')">成功</a-button>
      <a-button @click="checkType('error')">失败</a-button>
      <a-button @click="reset">重置</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Loading from '@/components/basic/loading/index.vue';
  const loading = ref(true);
  const type = ref('');

  const checkType = (value: string) => {
    setTimeout(() => {
      type.value = value;
    }, 100);
  };

  const reset = () => {
    type.value = '';
  };
</script>

<style scoped lang="less">
  .loading {
    padding: 50px;
    background-color: #fff;
  }
</style>
